/*
高性能组件

1PurceComponent 应用在类组件上面
2 memo 用用在函数式组件上面

*/


import React, { Component,PureComponent } from 'react';

/*类组件*/
// class Demo extends PureComponent{
//   render(){
//     return <h1>Demo组件{this.props.msg}</h1>
//   }
//   componentDidUpdate(){
//     console.log("Demo组件更新好了");
//   };
// }

/*函数式*/ 
// function Demo(props){
//   console.log("Demo组件渲染了");
//   return <h1>Demo组件{props.msg}</h1>
// }
const DemoWithMemo = React.memo(function Demo(props){
  console.log("Demo组件渲染了");
  return <h1>Demo组件{props.msg}</h1>
});

class App extends Component {
  state={
    msg:"(^_^)"
  };
  handleClick=(params) => {
    this.setState({
      msg:"(-_-) "
      // msg:"(^_^)"
    })
  };
  render() {
    return (
      <div>
        {/* <Demo msg={this.state.msg}></Demo> */}
         <DemoWithMemo msg={this.state.msg}></DemoWithMemo>
        <button onClick={this.handleClick}>改变牛</button>
      </div>
    );
  }
}

export default App;
